<template>
	<view v-if="showMask" class="item-mask" @touchmove.stop.prevent="moveHandle">
		<view class="item-box">
			<view class="page">
				<scroll-view class="scrollList" scroll-y :scroll-into-view="scrollViewId" :style="{ height: winHeight + 'px', width: winWidth + 'px' }">
					<view v-for="(list, key) in lists" :key="key">
						<view v-if="list.data.length">
							<view class="item-divider f26" :id="list.id">{{ list.letter }}</view>
							<view class="item-item" v-for="item in list.data" :key="item.key" @tap="chooseItem(item)">
								<uni-icons :type="item.choose ? 'checkbox-filled' : 'circle'" :color="item.choose ? '#007aff' : '#aaa'" size="24" />
								<image src="../../static/delet/acatar.png" mode="aspectFill" class="avatar"></image>
								<text class="f32 c333">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 右侧索引滑动 -->
				<view
					class="index-bar"
					:class="touchmove ? 'active' : ''"
					@touchstart="touchStart"
					@touchmove.stop.prevent="touchMove"
					@touchend="touchEnd"
					@touchcancel="touchCancel"
				>
					<text
						v-for="(list, key) in lists"
						:key="key"
						class="index-bar-text"
						:class="touchmoveIndex == key ? 'active' : ''"
						:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }"
					>
						{{ list.letter }}
					</text>
				</view>
				<view class="index-alert" v-if="indexAlert">{{ lists[touchmoveIndex].letter }}</view>
			</view>

			<view class="item-button-groups center">
				<view class="user_list flex center flex-start">
					<image src="../../static/delet/acatar.png" mode="aspectFill" class="avatar" v-for="(val,index) in chooseList" :key='index'></image>
				</view>
				<button class="item-button" type="primary" @click="confirm">确定({{chooseList.length}})</button>
			</view>
		</view>
	</view>
</template>

<script>
var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import pinyin from './pinyin.js';

export default {
	components: {
		uniIcons
	},
	props: {
		mode: {
			//	单选single或多选multi模式
			type: String,
			default: 'multi'
		},
		hashFirst: {
			type: Boolean,
			default: true
		},
		myList: {
			type: Array,
			default: () => {}
		}
	},
	data() {
		return {
			showMask: false,
			lists: [], // 当前页面显示的列表
			chooseList: [],

			touchmove: false,
			indexAlert: false,
			touchmoveIndex: -1,
			itemHeight: 0,
			winHeight: 0,
			barHeight: 0,
			titleHeight: 0,
			scrollViewId: 'A'
		};
	},

	methods: {
		moveHandle() {},
		show() {
			uni.hideKeyboard();
			this.showMask = true;
			this.winHeight = uni.getSystemInfoSync().windowHeight - 46; // 通讯录列表高度 = 页面高度（不含导航条） - 按钮高度
			this.winWidth = uni.getSystemInfoSync().windowWidth;

			if (this.lists.length == 0) {
				// 只获取一次
				this.getmyList();
			}

			// 清除上次选中
			this.lists.forEach(group => {
				group.data.forEach(one => {
					one.choose = false;
				});
			});

			this.chooseList = [];
		},
		// 获取通讯录
		getmyList() {
			let _this = this;
			if (this.hashFirst) {
				alphabet.unshift('#');
			} else {
				alphabet.push('#');
			}
			let myList = this.myList;
			this.getIndexList(myList);
		},
		// 生成右侧索引
		getIndexList(myList) {
			let unsorted = this.getModel();
			let key = 0;

			myList.forEach(item => {
				let firstChar = '';
				item.name = item.name ? item.name.trim() : '';
				if (item.name) {
					// 如传入空字符串，getCamelFistChar错误地返回Y
					firstChar = pinyin.getCamelFistChar(item.name).toUpperCase(); // 如字母开头，将返回字母且保留原大小写;一律改为大写
				}
				let hashIndex = alphabet.indexOf('#');
				let index = alphabet.indexOf(firstChar);
				index = index == -1 ? hashIndex : index;
				unsorted[index].data.push({ name: item.name, choose: false });
			});
			// 只保留有数据的list
			let sorted = [];
			unsorted.forEach(item => {
				if (item.data.length > 0) {
					// 按姓名拼音排序
					item.data.sort((a, b) => a.name.localeCompare(b.name, 'zh')); // name 不能为 null，否则localCompare 将报错
					sorted.push(item);
				}
			});
			this.lists = sorted;
			// console.log(JSON.stringify(this.lists))
			this.itemHeight = this.winHeight / this.lists.length;
		},

		getModel() {
			let model = [];
			alphabet.forEach(letter => {
				model.push({ letter: letter, data: [], id: letter == '#' ? 'hash' : letter });
			});
			return model;
		},
		// 确定事件
		confirm() {
			this.chooseList = [];
			this.lists.forEach(group => {
				group.data.forEach(one => {
					if (one.choose) {
						this.chooseList.push({ name: one.name, phone: one.phone });
					}
				});
			});

			if (this.chooseList.length == 0) {
				uni.showToast({
					icon: 'none',
					title: '未选中任何联系人'
				});
			}
			this.$emit('confirm', this.chooseList);
		},
		chooseItem(item) {
			if (this.mode == 'single') {
				// 单选模式
				if (item.choose == false) {
					// 选中
					this.lists.forEach(group => {
						group.data.forEach(one => {
							one.choose = false; // 全部设为false
						});
					});
					item.choose = true; // 当前项设为true
				} else {
					// 撤销选中
					item.choose = false;
				}
			} else if (this.mode == 'multi') {
				// 多选模式
				item.choose = !item.choose; // 改变当前点击项
			}
			if (item.choose == true) {
				this.chooseList.push(item)
			}
		},

		touchStart(e) {
			this.touchmove = true;
			let pageY = e.touches[0].pageY;
			let index = Math.floor((pageY - this.titleHeight) / this.itemHeight);
			let item = this.lists[index];
			if (item) {
				this.scrollViewId = item.id;
				this.touchmoveIndex = index;
				this.indexAlert = true;
			}
		},
		touchMove(e) {
			this.touchmove = true;
			let pageY = e.touches[0].pageY;
			let index = Math.floor((pageY - this.titleHeight) / this.itemHeight);
			let item = this.lists[index];
			if (item) {
				this.scrollViewId = item.id;
				this.touchmoveIndex = index;
				this.indexAlert = true;
			}
		},
		touchEnd() {
			this.touchmove = false;
			this.indexAlert = false;
			this.touchmoveIndex = -1;
		},
		touchCancel() {
			this.touchmove = false;
			this.indexAlert = false;
			this.touchmoveIndex = -1;
		}
	}
};
</script>

<style lang="scss">
.avatar{
	width:76rpx;
	height:76rpx;
	border-radius:50%;
	margin: 0 30rpx 0 20rpx;
}
.item-mask {
	display: block;
	position: fixed;
	right: 0;
	/* #ifdef H5 */
	top: 42px;
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	bottom: 0;
	align-items: center;
	width: 100%;
	z-index: 50;
}

.item-box {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #fff;
}

.page {
	flex-direction: row;
	display: block;
	position: relative;
}

.scrollList {
	flex: 1;
	height: 100vh;
}

.item-divider {
	width: 100%;
	background-color: #f3f3f3;
	padding: 24upx 42upx;
	color: #666;
}

.item-item {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding:18rpx 50upx 18rpx 0;
	margin-left: 10upx;
}

.item-item text {
	padding-left: 20upx;
	font-size: 30upx;
	line-height: 80upx;
}

.index-bar {
	width: 50upx;
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
}

.index-bar-text {
	color: #333;
	font-size: 22upx;
	text-align: center;
}

.index-bar-text.active,
.index-bar.active .index-bar-text.active {
	color: #007aff;
}

.index-alert {
	position: absolute;
	z-index: 20;
	width: 160upx;
	height: 160upx;
	left: 50%;
	top: 50%;
	margin-left: -80upx;
	margin-top: -80upx;
	border-radius: 80upx;
	text-align: center;
	line-height: 160upx;
	font-size: 70upx;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
}

.item-button-groups {
	text-align: center;
	margin-top: 10upx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 98rpx;
	background: #F3F3F3;
	.avatar{
		margin: 0 10rpx;
	}
}

.item-button {
	display: inline-block;
	margin: 0 30upx;
	font-size: 28upx;
	height:65rpx;
	border-radius:4rpx;
}
</style>
